<template>
  <div style="height: 100%">
  </div>
</template>

<script>
import Format from '@/utils/format'

export default {
  data() {
    return {
      changeSeries: null,
      charts: '',
      xList: [],
      yList: [],
      zList: [],
      xyList: [],
      xyzList: [],
      seriesLists: [],
      shiftTime: [],
      // 监测点名称
      monitorName: '',
      yName: '',
      legendData: [],
    }
  },
  filters: {
    // 时间格式化
    formatTimer(timer) {
      return Format(new Date(timer))
    }
  },
  computed: {
    options() {
      var that = this
      const Echarts = require('echarts')
      return {
        title: {
          text: this.monitorName + '电压变化曲线图',
          x: 'center',
          align: 'right'
        },
        legend: {
          y: 'top',
          x: 'center',
          padding: [30, 0 , 0, 0],
          // 设置为可滚动的图例
          type: 'scroll',
        },
        grid: {
          left: '4%',
          right: '4%',
          top: '100px',
          bottom: '70px'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            label: {
              backgroundColor: '#505765'
            }
          },
          formatter: (params, ticket, callback) => {
            var contentArr = []
            contentArr.push(Echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', new Date(params[0].value[0])))
            for (var i = 0; i < params.length; i++) {
              var data = params[i]
              contentArr.push(data.marker + data.seriesName + '电压值：' + data.value[1] + 'v')
            }
            return contentArr.join('<br/>')
          },
          // triggerOn:"click"
        },
        xAxis: {
          splitLine: {
            show: false
          },
          type: 'time',
          symbol: 'none',
          boundaryGap: false,
          axisLabel: { // 坐标轴标签样式设置
            formatter: function (value, index) { // 坐标轴文字展示样式处理
              return Echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', new Date(value))
            },
          }
        },
        toolbox: {
          right: '5',
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {},
            dataView: {
              show: true
            },
          }
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            handleSize: '80%',
            handleStyle: {
              color: '#fff',
              shadowBlur: 3,
              shadowColor: 'rgba(0, 0, 0, 0.6)',
              shadowOffsetX: 2,
              shadowOffsetY: 2
            }
          },
          {
            type: 'inside',
            realtime: true
          }
        ],
        yAxis: {
          name: '电压值(V)',
          type: 'value'
        },
        series: this.seriesLists
      }
    }
  },

  methods: {
    initEcharts() {
      if (this.charts) {
        this.charts.dispose()
        this.charts = undefined
      }
      var that = this
      const Echarts = require('echarts')
      this.charts = Echarts.init(this.$el, null, {locale: 'ZH'})
      this.charts.on('click', function (params) {
        // 控制台打印数据的名称
      });
      this.charts.on('mouseout', params => {
        // 关闭tip提示
        this.charts.dispatchAction({type: 'hideTip'})
      })

      this.$nextTick(() => {
        this.charts.showLoading({
          text: '久感科技为你服务', //显示的文本
          color: '#c23531', //显示转圈的圆圈颜色
          textCloor: '#000', //显示文本的颜色
          maskColor: 'rgba(255,255,255,0.8)', //显示的背景色
          // 字体大小。从 `v4.8.0` 开始支持。
          fontSize: 32,
          // 是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。
          showSpinner: true,
          // 旋转动画（spinner）的半径。从 `v4.8.0` 开始支持。
          spinnerRadius: 14,
          // 旋转动画（spinner）的线宽。从 `v4.8.0` 开始支持。
          lineWidth: 5,
          // 字体粗细。从 `v5.0.1` 开始支持。
          fontWeight: 'normal',
          // 字体风格。从 `v5.0.1` 开始支持。
          fontStyle: 'normal',
          // 字体系列。从 `v5.0.1` 开始支持。
          fontFamily: 'sans-serif'
        })

      })
    },
    echartResize() {
      this.charts.resize()
    },
    updateEchart(data,dataName) {
      this.seriesLists = []
      this.legendData = []
      this.shiftTime = []

        this.legendData.push(dataName[0])
        this.seriesLists.push(
          {
            name: 'vol',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 2,
            data: data.data1List,

            itemStyle: {
              normal: {
                lineStyle: {
                  width: 2// 0.1的线条是非常细的了
                }
              }
            },
          },
        )
      this.legendData.push(dataName[1])

      this.seriesLists.push(
        {
          name: 'sol',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 2,
          data: data.data2List,

          itemStyle: {
            normal: {
              lineStyle: {
                width: 2// 0.1的线条是非常细的了
              }
            }
          },
        },
      )

      this.initEcharts()
      this.charts.setOption(this.options)
      this.$nextTick(() => {
        this.charts.hideLoading()
      })
      this.echartResize()
    },
  },
}
</script>
